<template>
  <div class="container u-flex-col u-col-center">
    <el-input type="text" placeholder="用户名" class="login-txt" v-model="input.userNameOrEmailAddress"/>
    <el-input type="password" placeholder="密码" class="login-txt" v-model="input.password"/>
    <el-button type="primary" @click="login" class="login-txt" :loading="loading">登录</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRaw } from 'vue'
import { LoginRequest } from "../api/type/login";
import router from "/@/router";
import { userStore } from "/@/store/module/UserManager";
import { PageEnum } from "/@/enums/pageEnum";




export default defineComponent({
  name: 'login',
  setup(){
    const loading = ref(false);
    const input = reactive<LoginRequest>({
      userNameOrEmailAddress: 'admin',
      password: '123456',
    });
    const login = async () => {
      try {
        loading.value = true;
        await userStore.login(toRaw(input));
        await router.replace(PageEnum.BASE_HOME)
      }catch (e) {
        console.log('eee', e)
      }finally {
        loading.value = false;
      }
    }
    return {
      input,
      loading,
      login
    }
  }
})
</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
}
.login-txt{
  width: 300px;
  margin : 10px;
}
</style>
